<template>
    <div class="x-content">
        <el-row style="margin-bottom: 60px;">
            <el-col :span="24" class="x-title">变更后各大工程投资情况</el-col>
            <el-col :span="24" class="x-project">
                <span>工程施工费：</span>
                <ul>
                    <li>田间道路工程费：{{alterationRecordVO.constrRoadFee}}万元</li>
                    <li>土地平整工程费：{{alterationRecordVO.constrLandFee}}万元</li>
                    <li>农田水利工程费：{{alterationRecordVO.constrFarmlandFee}}万元</li>
                    <li>生态保护工程费：{{alterationRecordVO.constrEcologicalFee}}万元</li>
                    <li>其他施工费：{{alterationRecordVO.constrOtherFee}}万元</li>
                </ul>
            </el-col>
            <el-col :span="24" class="x-other">
                <ul>
                    <li>
                        设备购置费：
                        <span>{{alterationRecordVO.equipmentPurchaseFee}}万元</span>
                    </li>
                    <li>
                        项目建设亩均投资：
                        <span>{{alterationRecordVO.projectPerAcreInverstment}}万元</span>
                    </li>
                    <li>
                        不可预见费用：
                        <span>{{alterationRecordVO.imprevisionFee}}万元</span>
                    </li>
                    <li>
                        新增耕地亩均投资：
                        <span>{{alterationRecordVO.incrLandPerAcreInverstment}}万元</span>
                    </li>
                    <li>
                        其他费用：
                        <span>{{alterationRecordVO.otherFee}}万元</span>
                    </li>
                </ul>
            </el-col>
            <el-col :span="24" class="x-total">
                <span>工程总投资：</span>
                <span>{{alterationRecordVO.otherFee}}万元</span>
            </el-col>
        </el-row>
        <el-row style="margin-bottom: 60px;">
            <el-col :span="24" class="x-title">变更后信息建设</el-col>
            <el-col :span="6" class="x-scale">
                <ul>
                    <li>
                        <span>变更建设总规模：</span>
                        <span>{{alterationRecordVO.totalScale}}公顷</span>
                    </li>
                    <li>
                        <span>变更整理规模：</span>
                        <span>{{alterationRecordVO.tidyScale}}公顷</span>
                    </li>
                    <li>
                        <span>变更开发规模：</span>
                        <span>{{alterationRecordVO.exploitScale}}公顷</span>
                    </li>
                    <li>
                        <span>变更可用与占补平衡面积：</span>
                        <span>{{alterationRecordVO.useBalaceArea}}公顷</span>
                    </li>
                </ul>
            </el-col>
            <el-col :span="6" class="x-scale">
                <ul>
                    <li>
                        <span>变更复垦规模：</span>
                        <span>{{alterationRecordVO.reclamationScale}}公顷</span>
                    </li>
                    <li>
                        <span>变更新增耕地总面积：</span>
                        <span>{{alterationRecordVO.incrLandTotalArea}}公顷</span>
                    </li>
                    <li>
                        <span>变更新增整理耕地面积：</span>
                        <span>{{alterationRecordVO.incrTidyArea}}公顷</span>
                    </li>

                    <li>
                        <span>变更建成高标准基本农田规模：</span>
                        <span>{{alterationRecordVO.highStandFarmlandScale}}公顷</span>
                    </li>
                </ul>
            </el-col>
            <el-col :span="6" class="x-scale">
                <ul>
                    <li>
                        <span>变更开发规模：</span>
                        <span>{{alterationRecordVO.exploitScale}}公顷</span>
                    </li>
                    <li>
                        <span>变更新增复垦耕地面积：</span>
                        <span>{{alterationRecordVO.incrReclamationArea}}公顷</span>
                    </li>
                    <li>
                        <span>变更基本农田整理规模：</span>
                        <span>{{alterationRecordVO.farmlandExplotScale}}公顷</span>
                    </li>
                    <li>
                        <span>变更灾毁耕地面积：</span>
                        <span>{{alterationRecordVO.disasterDamageLand}}公顷</span>
                    </li>
                </ul>
            </el-col>
        </el-row>
        <el-row style="margin-bottom: 60px;">
            <el-col :span="24" class="x-title">项目变更设计</el-col>
            <el-row>
                <el-col :span="24" class="x-subtitle">变更原因</el-col>
                <el-col :span="24" class="x-info">
                    <span v-if="alterationRecordVO.alterationReason">{{alterationRecordVO.alterationReason}}</span>
                    <span v-else>暂无内容</span>
                </el-col>

                <el-col :span="24" class="x-subtitle">变更内容</el-col>
                <el-col :span="24" class="x-info">
                    <span v-if="alterationRecordVO.alterationContent">{{alterationRecordVO.alterationContent}}</span>
                    <span v-else>暂无内容</span>
                </el-col>

                <el-col :span="24" class="x-subtitle">造价影响情况</el-col>
                <el-col :span="24" class="x-info">
                    <span v-if="alterationRecordVO.impactCondition">{{alterationRecordVO.impactCondition}}</span>
                    <span v-else>暂无内容</span>
                </el-col>
            </el-row>
        </el-row>
    </div>
</template>

<script>
    import {getToken} from "@/utils/auth";
    import config from "@/config/index.js";
    import moment from "moment";
    import {
        getInvAndCon,
        getAdvice,
        addAdvice,
        getSignature
    } from "@/api/plannDesignBudget/reviewOpinions.js";
    import {
        getAlterationRecordById,getProjectNewestAlterationRecord
    } from "@/api/project1/designChange/countyApply/index";

    export default {
        name: "addDesignChangeApply",
        data() {
            return {
                id: this.$route.query.id,
                projectId:localStorage.getItem("projectId"),
                fileList: [],
                token: getToken(),
                uploadUrl: '/renovation/designAlteration/uploadAndAnalysisAlterationZip',
                alterationRecordVO: {
                    projectId: '',
                    totalInvestment: '',
                    constructionFee: '',
                    constrRoadFee: '',
                    constrLandFee: '',
                    constrFarmlandFee: '',
                    constrEcologicalFee: '',
                    constrOtherFee: '',
                    equipmentPurchaseFee: '',
                    otherFee: '',
                    imprevisionFee: '',
                    projectPerAcreInverstment: '',
                    incrLandPerAcreInverstment: '',
                    totalScale: '',
                    tidyScale: '',
                    exploitScale: '',
                    reclamationScale: '',
                    incrLandTotalArea: '',
                    incrTidyArea: '',
                    incrExplotArea: '',
                    incrReclamationArea: '',
                    farmlandExplotScale: '',
                    useBalaceArea: '',
                    highStandFarmlandScale: '',
                    disasterDamageLand: '',
                    alterationReason: '',
                    alterationContent: '',
                    impactCondition: '',
                    alterationZipId: '',
                }
            };
        },

        created() {
            this.getDetailInfo()
        },

        methods: {

            // 查询变更信息详情
            getDetailInfo() {
                if (this.id) {
                    // 根据变更记录id查询变更详情
                    getAlterationRecordById({id: this.id}).then(res => {
                        if (res.code == 1000) {
                            this.alterationRecordVO = res.data;
                            this.$emit('on-success', this.alterationRecordVO);
                            window.sessionStorage.setItem('alterationId',res.data.id);
                        }
                    });
                }else{
                    // 根据项目id查询最新一条变更记录信息
                    getProjectNewestAlterationRecord({projectId:this.projectId}).then(res=>{
                        if (res.code == 1000) {
                            this.alterationRecordVO = res.data;
                            this.$emit('on-success', this.alterationRecordVO);
                            window.sessionStorage.setItem('alterationId',res.data.id);
                        }
                    })
                }

            },

            //设计成果模板下载
            handleDownloadTemp() {
                let a = document.createElement("a");
                a.href = config.baseUrl +
                    "/renovation/templatefile/设计变更上传数据.zip";
                a.target = "_blank";
                a.click();
            },

        },
    };
</script>

<style scoped lang="scss">
    .x-content {
        margin-top: 20px;
        background-color: #fff;
        padding: 20px;
    .x-title {
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: bold;
        line-height: 25px;
        color: rgba(77, 77, 77, 1);
        margin-bottom: 30px;
    }
    .x-project {
        display: flex;
        align-items: center;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(102, 102, 102, 1);
        margin-bottom: 20px;
    ul {
        display: flex;
    li {
        margin-right: 30px;
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(166, 166, 166, 1);
    }
    }
    }
    .x-other {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 20px;
        color: rgba(102, 102, 102, 1);
        margin-bottom: 20px;
    ul {
        display: flex;
    li {
        margin-right: 60px;
    span {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 20px;
        color: rgba(166, 166, 166, 1);
    }
    }
    }
    }
    .x-scale {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 20px;

        color: rgba(166, 166, 166, 1);
        margin-bottom: 20px;
    }
    .x-scale ul li {
        padding: 5px 0;
    }
    .x-scale span:nth-of-type(1) {
        display: inline-block;
        width: 54%;
        text-align: right;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 20px;
        color: rgba(102, 102, 102, 1);
    }
    .x-total {
    span:first-child {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: bold;
        line-height: 20px;
        color: rgba(51, 51, 51, 1);
    }
    span:last-child {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 20px;
        color: rgba(51, 51, 51, 1);
    }
    }
    .x-subtitle {
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 20px;
        color: rgba(51, 51, 51, 1);
        margin-bottom: 10px;
    }
    .x-info {
        line-height: 20px;
        font-size: 14px;
        color: rgba(102, 102, 102, 1);
        margin-bottom: 20px;
    }
    }
</style>
